<template>
  <div class="bindEmail">
    <a-form-model :model="emailForm" :rules="rulesEmail" :label-col="{span: 4}"
                  :wrapper-col="{span: 12}" ref="emailForm">
      <a-form-model-item label="邮箱地址" prop="email">
        <a-input v-model="emailForm.email"></a-input>
      </a-form-model-item>
      <a-form-model-item label="图形验证码" prop="imageCode">
        <div style="display: flex">
          <a-input v-model="emailForm.imageCode" placeholder="请输入图形验证码"/>
          <img :src="imgSrcEmail" width="150" height="30" alt="" @click="refelshEmailImg">
        </div>
      </a-form-model-item>
      <a-form-model-item label="邮箱验证码" prop="emailCode">
        <a-input v-model="emailForm.emailCode" placeholder="请输入邮箱验证码">
          <a slot="addonAfter" @click="sendEmail" :disabled="disabled">
            {{sendText}}
          </a>
        </a-input>
      </a-form-model-item>
      <a-form-model-item>
        <a-button type="primary" @click="bindEmailCode('emailForm')" style="float: right">绑定
        </a-button>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
  import { bindEmail, getEmailImage, sendEmailCode } from "../../serves";
  import { eventBus } from '@/eventBus'

  export default {
    name: "BindEmail",
    data() {
      const validateEmail = (rule, value, callback) => {
        let reg = /^([a-zA-Z\d])(\w|)+@[a-zA-Z\d]+\.[a-zA-Z]{2,4}$/;
        if (value === '') {
          callback(new Error('请邮箱号码！'))
        } else if (!reg.test(value)) {
          callback(new Error('邮箱格式错误，请重新输入！'))
        } else {
          callback()
        }
      }
      return {
        emailForm: {
          email: '',
          imageCode: '',
          emailCode: ''
        },
        rulesEmail: {
          email: [{
            required: true,
            validator: validateEmail,
            trigger: 'change'
          }],
          imageCode: [{
            required: true,
            message: '图形验证码不能为空！',
            trigger: 'change'
          }],
          emailCode: [{
            required: true,
            message: '邮箱验证码不能为空！',
            trigger: 'change'
          }]
        },
        imgSrcEmail: '',
        sendText: '获取邮箱验证码',
        disabled: false,
      }
    },
    mounted() {
      this.getEmailImageCode()
    },
    methods: {
      // 绑定邮箱
      setTime(num) {
        if (num <= 1) {
          this.sendText = `重新发送`
          this.disabled = false
          clearTimeout(this.timer3)
          return false
        } else {
          this.disabled = true
          num--
        }
        this.sendText = `${num}s后重新发送`
        this.timer3 = setTimeout(() => {
          this.setTime(num)
        }, 1000)
      },
      sendEmail() {
        if (!this.emailForm.email) {
          this.$message.warning('请输入电子邮箱！')
          return
        }
        this.sendText = `60s后重新发送`
        this.disabled = true
        this.setTime(60)
        let params = {
          data: this.emailForm.email
        }
        sendEmailCode(params).then(res => {
          if (res.status == 200 && res.data.status.code == 200) {
            this.$message.success('发送成功！')
          } else {
            this.$message.warning(res.data.message)
          }
        })
      },
      refelshEmailImg() {
        this.getEmailImageCode()
      },
      // 获取图形验证码
      getEmailImageCode() {
        getEmailImage().then(res => {
          if (res.status == 200 && res.data.status.code == 200) {
            this.imgSrcEmail = res.data.data
          } else {
            this.$message.warning(res.data.message)
          }
        })
      },
      bindEmailCode(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            let params = {
              email: this.emailForm.email,
              imageCode: this.emailForm.imageCode,
              emailCode: this.emailForm.emailCode,
            }
            bindEmail(params).then(res => {
              if (res.status == 200 && res.data.status.code == 200) {
                this.$message.success("绑定成功！")
                this.$emit('showBindEmail', this.emailForm.email, true)
              } else if (res.data.status.code == 450) {
                this.$message.warning(res.data.message)
                this.$router.push({
                  path: '/login'
                })
                eventBus.$emit('isShow', false);
              } else {
                this.$message.warning(res.data.message)
              }
            })
          }
        })
      },
    }
  }
</script>

<style scoped>

</style>
